<!--
 * @Author: Seon.Hu SeonHu@126.com
 * @Date: 2023-03-15 16:26:40
 * @LastEditors: Seon.Hu SeonHu@126.com
 * @LastEditTime: 2023-11-22 09:03:08
 * @FilePath: \bg-vben\src\components\AdList\src\components\settings\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="list-settings">
    <RedoSetting v-if="getSetting.redo" :getPopupContainer="getListContainer" />
    <SizeSetting v-if="getSetting.size" :getPopupContainer="getListContainer" />
    <FullScreenSetting v-if="getSetting.fullScreen" :getPopupContainer="getListContainer" />
  </div>
</template>
<script lang="ts" setup>
  import type { PropType } from 'vue';
  import type { ListSetting } from '../../types/adList';
  import { computed, unref } from 'vue';
  import SizeSetting from './SizeSetting.vue';
  import RedoSetting from './RedoSetting.vue';
  import FullScreenSetting from './FullScreenSetting.vue';
  // import { useI18n } from '@/hooks/web/useI18n';
  import { useListContext } from '../../hooks/useListContext';

  defineOptions({ name: 'TableSetting' });
  const props = defineProps({
    setting: {
      type: Object as PropType<ListSetting>,
      default: () => ({}),
    },
  });

  // const { t } = useI18n();
  const list = useListContext();

  const getSetting = computed((): ListSetting => {
    return {
      redo: true,
      size: true,
      fullScreen: false,
      ...props.setting,
    };
  });

  function getListContainer() {
    return list ? unref(list.wrapRef) : document.body;
  }
</script>
<style lang="less">
  .list-settings {
    & > * {
      margin-right: 12px;
    }

    svg {
      width: 1.3em;
      height: 1.3em;
    }
  }
</style>
